import type { ComputedRef, Ref } from 'vue'
import { nextTick, unref } from 'vue'
import { warn } from '/@/utils/log'

export function useTableScrollTo(tableElRef: Ref<ComponentRef>, getDataSourceRef: ComputedRef<Recordable[]>) {
  let bodyEl: HTMLElement | null

  async function findTargetRowToScroll(targetRowData: Recordable) {
    const { id } = targetRowData
    const targetRowEl: HTMLElement | null | undefined = bodyEl?.querySelector(`[data-row-key="${id}"]`)
    //Add a delay to get new dataSource
    await nextTick()
    bodyEl?.scrollTo({
      top: targetRowEl?.offsetTop ?? 0,
      behavior: 'smooth',
    })
  }

  function scrollTo(pos: string): void {
    const table = unref(tableElRef)
    if (!table) return

    const tableEl: Element = table.$el
    if (!tableEl) return

    if (!bodyEl) {
      bodyEl = tableEl.querySelector('.ant-table-body')
      if (!bodyEl) return
    }

    const dataSource = unref(getDataSourceRef)
    if (!dataSource) return

    // judge pos type
    if (pos === 'top') {
      findTargetRowToScroll(dataSource[0])
    } else if (pos === 'bottom') {
      findTargetRowToScroll(dataSource[dataSource.length - 1])
    } else {
      const targetRowData = dataSource.find((data) => data.id === pos)
      if (targetRowData) {
        findTargetRowToScroll(targetRowData)
      } else {
        warn(`id: ${pos} doesn't exist`)
      }
    }
  }

  return { scrollTo }
}
